<template>
    <div class="ck"  draggable=false  v-bind:style="{ 'background-color': getDetailBackground }">
      <ckeditor v-model="getDetailText" :editor="editor" :config="editorConfig"  :disabled="true"></ckeditor>
    </div>
</template>

<script>
import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'

import Code from '@ckeditor/ckeditor5-basic-styles/src/code'
import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'

import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
import Heading from '@ckeditor/ckeditor5-heading/src/heading'
import Indent from '@ckeditor/ckeditor5-indent/src/indent'
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'
import Font from '@ckeditor/ckeditor5-font/src/font'
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'

export default {
  name: 'app',
  mounted () {
  },
  props: ['getDetail'],
  computed: {
    getDetailText () {
      return this.getDetail.text
    },
    getDetailBackground () {
      return this.getDetail.background
    }
  },
  data () {
    return {
      drawer: false,
      editor: InlineEditor,
      editorConfig: {
        plugins: [
          Essentials,
          Bold,
          Code,
          Subscript,
          Superscript,
          Paragraph,
          Alignment,
          Heading,
          Indent,
          IndentBlock,
          Font,
          CodeBlock
        ],
        toolbar: [
          'heading',
          '|',
          'fontFamily',
          'fontSize',
          'fontColor',
          'fontBackgroundColor',
          '|',
          'bold',
          'codeBlock',
          'subscript',
          'superscript',
          '|',
          'outdent',
          'indent',
          '|',
          'alignment',
          '|',
          'undo',
          'redo'
        ],
        alignment: {
          options: ['left', 'right', 'center', 'justify']
        },
        heading: {
          options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
            { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
            { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
          ]
        },
        fontFamily: {
          options: [
            'default',
            '宋体',
            '黑体',
            '楷体',
            '微软雅黑',
            '仿宋_GB2312',
            '隶书',
            '幼圆',
            'Arial, Helvetica, sans-serif',
            'Courier New, Courier, monospace',
            'Georgia, serif'
          ]
        },
        fontSize: {
          options: ['default', 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 70]
        },
        fontColor: {
          colors: [
            { color: '#3c3c3c' }, { color: '#600000' }, { color: '#9f0050' }, { color: '#750075' }, { color: '#4b0091' }, { color: '#0000c6' }, { color: '#007979' }, { color: '#009100' },
            { color: '#7b7b7b' }, { color: '#ce0000' }, { color: '#ff0080' }, { color: '#e800e8' }, { color: '#921aff' }, { color: '#4a4aff' }, { color: '#00e3e3' }, { color: '#00ec00' },
            { color: '#bebebe' }, { color: '#ff5151' }, { color: '#ff95ca' }, { color: '#ff8eff' }, { color: '#ca8eff' }, { color: '#aaaaff' }, { color: '#a6ffff' }, { color: '#93ff93' },
            { color: '#fcfcfc' }, { color: '#ffd2d2' }, { color: '#ffecf5' }, { color: '#ffe6ff' }, { color: '#f1e1ff' }, { color: '#ececff' }, { color: '#ecffff' }, { color: '#dfffdf' },
            { color: '#64a600' }, { color: '#977c00' }, { color: '#a23400' }, { color: '#613030' }, { color: '#616130' }, { color: '#336666' }, { color: '#484891' }, { color: '#6c3365' },
            { color: '#9aff02' }, { color: '#eac100' }, { color: '#ff5809' }, { color: '#984b4b' }, { color: '#949449' }, { color: '#4f9d9d' }, { color: '#7373b9' }, { color: '#9f4d95' },
            { color: '#ccff80' }, { color: '#ffe66f' }, { color: '#ffad86' }, { color: '#c48888' }, { color: '#b9b973' }, { color: '#81c0c0' }, { color: '#a6a6d2' }, { color: '#c07ab8' },
            { color: '#efffd7' }, { color: '#fff8d7' }, { color: '#ffe6d9' }, { color: '#ebd6d6' }, { color: '#dedebe' }, { color: '#c4e1e1' }, { color: '#e6e6f2' }, { color: '#e2cede' }
          ],
          columns: 8
        },
        fontBackgroundColor: {
          colors: [
            { color: '#3c3c3c' }, { color: '#600000' }, { color: '#9f0050' }, { color: '#750075' }, { color: '#4b0091' }, { color: '#0000c6' }, { color: '#007979' }, { color: '#009100' },
            { color: '#7b7b7b' }, { color: '#ce0000' }, { color: '#ff0080' }, { color: '#e800e8' }, { color: '#921aff' }, { color: '#4a4aff' }, { color: '#00e3e3' }, { color: '#00ec00' },
            { color: '#bebebe' }, { color: '#ff5151' }, { color: '#ff95ca' }, { color: '#ff8eff' }, { color: '#ca8eff' }, { color: '#aaaaff' }, { color: '#a6ffff' }, { color: '#93ff93' },
            { color: '#fcfcfc' }, { color: '#ffd2d2' }, { color: '#ffecf5' }, { color: '#ffe6ff' }, { color: '#f1e1ff' }, { color: '#ececff' }, { color: '#ecffff' }, { color: '#dfffdf' },
            { color: '#64a600' }, { color: '#977c00' }, { color: '#a23400' }, { color: '#613030' }, { color: '#616130' }, { color: '#336666' }, { color: '#484891' }, { color: '#6c3365' },
            { color: '#9aff02' }, { color: '#eac100' }, { color: '#ff5809' }, { color: '#984b4b' }, { color: '#949449' }, { color: '#4f9d9d' }, { color: '#7373b9' }, { color: '#9f4d95' },
            { color: '#ccff80' }, { color: '#ffe66f' }, { color: '#ffad86' }, { color: '#c48888' }, { color: '#b9b973' }, { color: '#81c0c0' }, { color: '#a6a6d2' }, { color: '#c07ab8' },
            { color: '#efffd7' }, { color: '#fff8d7' }, { color: '#ffe6d9' }, { color: '#ebd6d6' }, { color: '#dedebe' }, { color: '#c4e1e1' }, { color: '#e6e6f2' }, { color: '#e2cede' }
          ],
          columns: 8
        },
        codeBlock: {
          languages: [
            { language: 'plaintext', label: 'Plain text' },
            { language: 'javascript', label: 'JavaScript' },
            { language: 'c', label: 'C' },
            { language: 'cs', label: 'C#' },
            { language: 'cpp', label: 'C++' },
            { language: 'css', label: 'CSS' },
            { language: 'diff', label: 'Diff' },
            { language: 'xml', label: 'HTML/XML' },
            { language: 'java', label: 'Java' },
            { language: 'php', label: 'PHP' },
            { language: 'python', label: 'Python' },
            { language: 'ruby', label: 'Ruby' },
            { language: 'typescript', label: 'TypeScript' },
            { language: 'plaintext', label: 'R' }
          ]
        }
      }
    }
  }
}
</script>
<style scoped>
  .ck {
    box-sizing: border-box;
    cursor:text;
    height:calc(100% - 0px);
    width:calc(100% -0px);
    user-select:text;
    overflow: hidden;
  }
</style>
